<template>
	<view>
		<view class="c-loading_rect">
			<view class="c-loading_rect-wrapper">
				<view class="rect rect1"></view>
				<view class="rect rect2"></view>
				<view class="rect rect3"></view>
				<view class="rect rect4"></view>
				<view class="rect rect5"></view>
			</view>
			<view class="c-loading_rect-text">加载更多号码...</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cu-loading",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.c-loading_rect {
		padding: .48rem 0;
		text-align: center
	}

	.c-loading_rect-wrapper {
		height: .6rem;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		width: .6rem
	}

	.c-loading_rect-wrapper .rect {
		-webkit-animation: stretchDelay 1.2s ease-in-out infinite;
		animation: stretchDelay 1.2s ease-in-out infinite;
		background-color: #f60;
		float: left;
		height: .6rem;
		margin: 0 .02rem;
		width: .08rem
	}

	.c-loading_rect-wrapper .rect2 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s
	}

	.c-loading_rect-wrapper .rect3 {
		-webkit-animation-delay: -1s;
		animation-delay: -1s
	}

	.c-loading_rect-wrapper .rect4 {
		-webkit-animation-delay: -.9s;
		animation-delay: -.9s
	}

	.c-loading_rect-wrapper .rect5 {
		-webkit-animation-delay: -.8s;
		animation-delay: -.8s
	}

	.c-loading_rect-text {
		color: #f60;
		font-size: .28rem
	}

	@-webkit-keyframes stretchDelay {

		0%,
		40%,
		to {
			-webkit-transform: scaleY(.4);
			transform: scaleY(.4)
		}

		20% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1)
		}
	}

	@keyframes stretchDelay {

		0%,
		40%,
		to {
			-webkit-transform: scaleY(.4);
			transform: scaleY(.4)
		}

		20% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1)
		}
	}

	.c-loading_end {
		margin: .3rem
	}

	.c-loading_end .end-text {
		color: #ccc;
		font-size: .24rem;
		letter-spacing: .02rem;
		padding: .2rem 0;
		text-align: center
	}
</style>